@import "../var";
@import "../mixin";
//@import "../module/channelPage/selectPlace";
.channel-page {
  .channel-page-swiper {
    height: px(125);
    .swiper-container {
      height: 100%;
      img {
        height: 100%;
      }
    }
  }
  .channel-page-advertisement {
    margin-bottom: px(10);
    .advertisement-list {
      overflow: hidden;
      .advertisement-item {
        position: relative;
        background-color: $clr-white;
        a {
          display: block;
          img {
            width: 100%;
            height: 100%;
            display: block;
            transform: translateZ(0);
          }
        }
        &.le {
          width: 50%;
          height: px(188);
          float: left;
          &:after {
            content: " ";
            position: absolute;
            right: 0;
            top: 0;
            width: .01rem;
            bottom: 0;
            border-right: px(1) solid #eee;
            color: #eee;
            transform-origin: 100% 0;
            transform: scaleX(.5);
            z-index: 9;
          }
        }
        &.ri {
          width: 50%;
          height: px(94);
          float: right;
          &:after {
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: px(1);
            border-bottom: px(1) solid #eee;
            color: #eee;
            transform-origin: 0 100%;
            transform: scaleY(.5);
            z-index: 9;
          }
        }
        &.b-le {
          width: 25%;
          height: px(94);
          float: left;
          &:after {
            content: " ";
            position: absolute;
            right: 0;
            top: 0;
            width: px(1);
            bottom: 0;
            border-right: px(1) solid #eee;
            color: #eee;
            transform-origin: 100% 0;
            transform: scaleX(.5);
            z-index: 9;
          }
        }
        &.b-ri {
          width: 25%;
          height: px(94);
          float: left;
        }
      }
    }
  }
  .channel-page-hotplace {
    background-color: $clr-white;
    margin-bottom: px(10);
    .hotplace-title {
      text-align: center;
      padding: px(16) px(0);
      font-size: 0;
      p {
        height: px(22);
        line-height: px(22);
        font-size: px(16);
        font-weight: bold;
        position: relative;
        padding: px(0) px(12);
        margin: px(0) px(4);
        display: inline-block;
        vertical-align: middle;
        &:before,&:after {
          content: "";
          width: px(3);
          height: px(3);
          background-color: $clr-g3;
          display: block;
          position: absolute;
          top: px(1);
          bottom: px(1);
          margin: auto;
          transform: rotateZ(45deg);
        }
        &:before {
          left: 0;
        }
        &:after {
          right: 0;
        }
      }
      .line {
        width: px(40);
        height: px(1);
        display: inline-block;
        vertical-align: middle;
        transform-origin: 0 100%;
        transform: scaleY(0.5);
        background-color: $clr-g3;
      }
    }
    .gzl-grid__box {
      &:before {
        content: " ";
        position: absolute;
        left: 0;
        top: px(-1);
        right: 0;
        height: px(1);
        border-bottom: px(1) solid #eee;
        color: #eee;
        transform-origin: 0 100%;
        transform: scaleY(.5);
      }
      .gzl-grid__item {
        width: 25%;
        padding: px(10) px(0);
        p {
          line-height: px(20);
          padding: px(0) px(10);
          @include ellipsis();
        }
      }
    }
  }
  .channel-page-classify {
    margin-bottom: px(10);
    background-color: $clr-white;
    .classify-list {
      padding-bottom: px(10);
      overflow: hidden;
      .classify-item {
        width: px(172);
        height: px(100);
        margin: px(10) px(0) px(0) px(10);
        float: left;
        a {
          display: block;
          img {
            width: 100%;
            height: 100%;
            display: block;
            transform: translateZ(0);
          }
        }
      }
    }
  }
  .channel-page-nav {
    background-color: $clr-white;
  }
  .channel-page-type {
    padding: px(0) px(0) px(10);
    background: $clr-bg;
    .channel-page-list {
      overflow: hidden;
      .list-item {
        width: px(172);
        height: px(222);
        margin: px(10) px(0) px(0) px(10);
        padding: px(0) px(0) px(10);
        position: relative;
        background-color: $clr-white;
        border-radius: px(4);
        overflow: hidden;
        float: left;
        & > a {
          img {
            width: px(172);
            height: px(116);
            display: block;
          }
        }
        .prod-name {
          height: px(40);
          line-height: px(20);
          text-align: justify;
          color: $clr-g3;
          font-size: px(14);
          margin: px(8) px(0) px(4);
          padding: px(0) px(10);
          word-break: break-all;
          @include line-clamp(2);
        }
        .prod-tag-list {
          min-height: px(16);
          margin-bottom: px(4);
          padding: px(0) px(10);
          overflow: hidden;
          .prod-tag-item {
            height: px(16);
            line-height: px(16);
            color: $clr-g8;
            font-size: px(10);
            padding: px(0) px(8);
            margin-right: px(8);
            float: left;
            background-color: $clr-bg;
            border-radius: px(16);
          }
        }
        .prod-icon-list {
          min-height: px(16);
          margin-bottom: px(4);
          padding: px(0) px(10);
          overflow: hidden;
          .prod-icon-item {
            height: px(16);
            line-height: px(16);
            font-size: px(12);
            margin-right: px(6);
            float: left;
          }
        }
        .prod-price {
          max-width: 45%;
          height: px(24);
          line-height: px(24);
          font-size: px(20);
          font-weight: bold;
          color: #F9355C;
          padding: px(0) px(8);
          span {
            font-size: px(12);
            font-weight: 400;
          }
        }
        .prod-count {
          height: px(14);
          line-height: px(14);
          font-size: px(10);
          color: $clr-g9;
          position: absolute;
          bottom: px(14);
          right: px(8);
        }
      }
    }
  }
  .hotel-sel {
    height: px(441);
    background-color: $clr-white;
    position: relative;
    img {
      width: 100%;
      height: px(200);
      display: block;
    }
    .hotel-sel-box {
      width: px(351);
      height: px(280);
      position: absolute;
      bottom: 0;
      left: px(1);
      right: px(1);
      margin: auto;
      padding: 0 px(20);
      background-color: $clr-white;
      box-shadow: 0 3px 10px 0 rgba(0,0,0,0.05);
      border-radius: 4px;
      .hotel-sel-address {
        line-height: px(22);
        text-align: center;
        font-size: px(16);
        color: $clr-g3;
        padding: px(14) px(16);
        position: relative;
        @include ellipsis();
        svg {
          font-size: px(16);
          position: absolute;
          top: px(1);
          bottom: px(1);
          right: 0;
          margin: auto;
        }
      }
      .hotel-sel-date {
        line-height: px(22);
        text-align: center;
        font-size: px(16);
        color: $clr-g3;
        padding: px(14) px(0) px(17);
        position: relative;
        align-items: center;
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          left: 0;
          border-top: .01rem solid #eee;
          transform: scaleY(.5);
        }
        em {
          min-width: px(40);
          height: px(18);
          line-height: px(18);
          text-align: center;
          font-size: px(12);
          color: $clr-g9;
          background-color: $clr-bg;
          display: block;
          border-radius: px(18);
        }
      }
      .hotel-sel-name,.hotel-sel-level {
        line-height: px(22);
        text-align: center;
        font-size: px(16);
        color: $clr-gc;
        padding: px(14) px(0);
        position: relative;
      }
      .hotel-sel-name {
        input {
          width: 100%;
          height: px(22);
          text-align: center;
          display: block;
          border: none;
        }
      }
      .hotel-sel-btnbox {
        padding: px(18) px(0);
        .search-btn {
          height: px(40);
          line-height: px(40);
          font-size: px(16);
          color: $clr-g4;
          border-radius: px(40);
        }
      }
      .bt-line {
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          left: 0;
          border-top: px(1) solid #eee;
          transform: scaleY(.5);
        }
      }
    }
  }
  .hotel-nav {
    margin-bottom: px(10);
    background-color: $clr-white;
    .hotel-nav-list {
      overflow: hidden;
      .hotel-nav-item {
        width: 25%;
        text-align: center;
        float: left;
        padding: px(20) px(0) px(16);
        img {
          width: px(40);
          height: px(40);
          display: block;
          margin: px(0) auto px(6);
        }
        p {
          line-height: px(17);
          font-size: px(12);
          color: $clr-g3;
          @include ellipsis();
        }
      }
    }
  }
  .channel-tag {
    margin-bottom: px(10);
    background-color: $clr-white;
    .channel-tag-list {
      overflow: hidden;
      .channel-tag-item {
        height: px(80);
        img {
          width: 100%;
          height: px(80);
          display: block;
        }
      }
      .gzl-grid__item {
        width: 50%;
        padding: px(0);
      }
    }
  }
}

.select-level-box {
  padding: px(16);
  .select-level-title {
    height: px(22);
    line-height: px(22);
    font-size: px(16);
    font-weight: bold;
    color: $clr-g3;
    margin-top: px(20);
  }
  .level-list {
    overflow: hidden;
    .level-item {
      width: 33.33%;
      text-align: center;
      font-size: px(14);
      color: $clr-g3;
      padding-right: px(10);
      margin-top: px(10);
      float: left;
      span {
        height: px(32);
        line-height: px(32);
        display: block;
        background-color: $clr-bg;
        border-radius: px(32);
      }
      &:nth-child(3n) {
        padding-right: px(0);
      }
      &.on {
        span {
          background-color: $clr-main;
        }
      }
    }
  }
  .range-sel {
    position: relative;
    padding: px(30) px(10);
    .range-max {
      display: none;
      position: absolute;
      bottom: px(-4.5);
      right: px(0);
      height: px(20);
      line-height: px(20);
      font-size: px(14);
      color: $clr-g3;
    }
  }
}

.visaChannel-page {
  .visaSearchBlock{
    //background-image: url('../../img/channelPage/visaChannelBG.png');
    height: px(125);
    overflow: hidden;
    .input-wrap{
      width: px(335);
      height: px(28);
      margin: px(48) auto 0;
      position: relative;
      input{
        display: block;
        width: 100%;
        height: 100%;
        border: none;
        text-align: center;
        border-radius: px(14);
        background: rgba(255, 255, 255, 0.9);
      }
      .icon{
        position: absolute;
        top: 0;
        font-size: px(18);
        color: #ccc;
        line-height: px(28);
        left: 50%;
        margin-top: px(5);
        margin-left: px(-67);
      }
    }
  }
  .channel-page-swiper {
    // height: px(125);
    background-color: #fff;
    margin-bottom: px(12);
    .swiper-slide{
      // height: 100%;
      padding: px(10) 0 px(15) px(9);
      font-size: 0;
      a.countryBlock{
        height: px(80);
        width: px(112);
        border-radius: px(2);
        margin: 0 px(10) px(10) 0;
        display: inline-block;
        overflow: hidden;
        .img-wrap{
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .swiper-pagination-bullet-active{
      width: .1rem;
      background: #FFD800;
      border-radius: 2.5px;
    }
  }
  .advertising-wrap{
    display: block;
    font-size: 0;
    .full-advertising{
      width: 100%;
      height: px(120);
      img{
        width: 100%;
        height: 100%;
      }
    }
    .half-advertising{
      width: 50%;
      height: px(120);
      display: inline-block;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
// 票券
.ticket-nav {
  font-size: 0;
  padding: px(16) 0;
  margin-bottom: px(12);
  background-color: #fff;
  li {
    font-size: px(12);
    display: inline-block;
    width: 33.33%;
    text-align: center;
    &:nth-child(n+4) {
      margin-top: px(20);
    }
    p {
      margin-top: px(6);
    }
  }
}
.ticket-place-nav {
  font-size: 0;
  padding: 16px px(7);
  margin: px(12) 0;
  background-color: #fff;
  li {
    display: inline-block;
    margin: 0 px(5);
    width: px(110);
    height: px(80);
    &:nth-child(n+4) {
      margin-top: px(12);
    }
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
